<template>
<div style="z-index:7;left: 0;top: 0;position: fixed;height: 100%;width: 100%;background-color:white;">
    <div class="zhezhao"></div>
    <img src="../../../../assets/changepsw/back.png" class="img_back" @click="goback">
    <div class="div1">
       <span v-show="!oldemail">绑定</span><span v-show="oldemail">更换</span>邮箱
    </div>
    <div class="div2">
        <div style="font-size:30px"><span v-show="!oldemail">绑定</span><span v-show="oldemail">更换</span>邮箱号</div>
        <div style="font-size: 12px;margin-top: 5px;color: rgb(138, 138, 138);">
            可通过新的邮箱号找回密码、验证身份。</div>
    </div>
    <div class="div2" style="margin-top:122px;padding-top:0px;padding-bottom:0px">
        <ImgIcon1 class="icon" v-show="icon==0"></ImgIcon1>
        <ImgIcon2 class="icon" v-show="icon==1"></ImgIcon2>
        <ImgIcon3 class="icon" v-show="icon==2"></ImgIcon3>
        <div class="div5" :style="cicle_style+(cicle_ShowLater?'opacity:1':'opacity:0')"></div>
        <input type="text" class="input" placeholder="请输入新的邮箱号" v-model="email">
        <img src="../../../../assets/changepsw/false.png" class="img_false" v-show="email" @click="deleteemail">
    </div>
    <div class="div3" v-show="ErrorMessage" :style="ErrorPosition+ErrorPosition2">
        <img src="../../../../assets/changepsw/error.png" class="img_error">
        <span style="margin-left:15px">该邮箱号与当前绑定的邮箱号相同</span>
    </div>
    <div class="div4" @click="next()" :style="CandSubmit?'background-color: rgb(255, 150, 215);':''">下一步</div>
</div>
</template>

<script>
import ImgIcon1 from './img/email/img_icon1.vue'
import ImgIcon2 from './img/email/img_icon2.vue'
import ImgIcon3 from './img/email/img_icon3.vue'
export default {
    name:'newemail',
    components:{ImgIcon1,ImgIcon2,ImgIcon3},
    data(){
        return{
            oldemail:'',
            email:'',
            ErrorMessage:0,
            ErrorPosition:'',
            ErrorPosition2:'',
            CandSubmit:0,
            icon:0,
            circle:[
                'background-color: rgb(126, 216, 255);box-shadow: 0px 0px 35px 35px rgb(126, 216, 255);',
                'background-color: rgb(255, 97, 118);box-shadow: 0px 0px 35px 35px rgb(255, 97, 118);',
                'background-color: rgb(126, 255, 173);box-shadow: 0px 0px 35px 35px rgb(126, 255, 173);'
            ],
            cicle_style:'',
            cicle_ShowLater:0
        }
    },
    methods:{
        goback(){this.$router.replace({name:'checkemail'})},
        deleteemail(){this.email=''},
        next(){
            if(this.CandSubmit){
                if(this.email == this.oldemail){
                    this.ErrorMessage=1
                }else{
                    this.$addr.get(`email/send`,{
                        params:{
                            email:this.email
                        }
                    }).then(
                        response=>{
                            console.log('发送验证码请求成功',response.data);
                                this.$router.replace({name:'checkCode',params:{'email':this.email}})
                        },error=>{
                            this.$message({
                                message:'发送验证码请求失败，请重新登陆',
                                type:'error'
                            })
                            console.log("发送验证码请求失败",error.message);
                            //this.$router.replace({name:'login'})
                        }
                    )
                }
            }
        }
    },
    watch:{
        ErrorMessage(value){
            if(value == 1){
                // let num = -295
                let num = -40
                let ok = 0
                var id = setInterval(() => {
                    this.ErrorPosition='margin-top:'+num+'px'
                    // console.log(this.ErrorPosition,'@');
                    if(num < -60){
                        ok = 1
                        num++
                    }else if(ok){
                        if(num > -55){
                            clearInterval(id);
                        }else{
                            num++
                        }
                    }else{
                        num--
                    }
                }, 3);
                var id3 = setTimeout(() => {
                    let num2=1
                    var id2 = setInterval(() => {
                        //下面的分号非常细节
                        this.ErrorPosition2=';opacity:'+num2
                        // console.log(this.ErrorPosition2,'%');
                        if(num2 < 0.05){
                            clearInterval(id2)
                            clearTimeout(id3)
                            this.ErrorMessage=0
                            this.ErrorPosition=this.ErrorPosition2=''
                        }else{
                            num2-=0.05
                        }
                    }, 15);
                }, 1000);
            }
        },
        email(value){
            this.CandSubmit=0
            this.icon=0
            this.cicle_style=''
            if(value == ''){
                this.cicle_style=this.circle[0]
                this.icon=0     // 任意多个字符+@+任意多个字符+.+任意多个字符
            }else if(value.match(/^\w+@\w+\.\w+$/i)){
                this.cicle_style=this.circle[2]
                this.CandSubmit=1
                this.icon=2
            }else{
                this.cicle_style=this.circle[1]
                this.icon=1
            }
            if(value.length > 25){
                this.email=value.slice(0,25)
            }
        },
    },
    mounted(){
        setTimeout(() => {
            this.cicle_ShowLater=1
        }, 250);
        this.$addr.get(`user/get_by_uid`).then(
            response=>{
                console.log('获取用户数据请求成功',response.data);
                if(response.data.data.email != null){
                    this.oldemail=response.data.data.email
                }
            },error=>{
                this.$message({
                    message:'获取用户数据请求失败，请重新登陆',
                    type:'error'
                })
                console.log("获取用户数据请求失败",error.message);
                //this.$router.replace({name:'login'})
            }
        )
    },
}
</script>

<style scoped>
.icon{
    width: 25px;
    height: 25px;
    position: fixed;
    margin-top: 12px;
    z-index: 1;
    margin-left: 3px;
}
.div5{
    border-radius: 6px;
    margin-top: 5px;
    margin-left: -40px;
    position: fixed;
    background-color: rgb(126, 216, 255);
    box-shadow: 0px 0px 35px 35px rgb(126, 216, 255);
    transition: background-color .5s ease-in-out, box-shadow .5s ease-in-out,opacity .8s ease-out;
}
.div1{
    background: linear-gradient(to right,rgb(255, 182, 238),rgb(255, 113, 236));
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 15px;
    user-select: none;
}
.img_back{
    position: fixed;
    margin-top: 28px;
    left: 14px;
    height: 18px;
}
.zhezhao{
    width: 100%;
    height: 100%;
    background-color: rgb(252, 245, 252);
    opacity: 0.4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.div2{
    padding-top: 20px;
    background-color: rgb(255, 255, 255);
    font-size: 17px;
    padding-bottom: 25px;
    position: fixed;
    margin-left: -5px;
    padding-left: 25px;
    width: 100%;
    box-shadow: 0px 2px 4px 0.1px rgb(236, 236, 236);
}
.input{
    margin-left: 50px;
    outline: none;
    border: 0px;
    font-size: 16px;
    width: 70%;
    background-color: rgb(255, 255, 255);
    padding-top: 15px;
    padding-bottom: 15px;
}
input::-webkit-input-placeholder{
  color:rgb(188, 188, 188);
}
.img_false{
    position: absolute;
    height: 15px;
    margin-top: 17px;
}
.div3{
    position: absolute;
    width: 94%;
    font-size: 18px;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-left: 10px;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 1px 5px 1px rgb(212, 212, 212) ;
    /* margin-top: -310px; */
    margin-top: -39px;
}
.img_error{
    height: 26px;
    position: absolute;
    margin-left: -15px;
    margin-top: 1px;
}
.div4{
    margin-top: 300px;
    background-color: rgb(255, 206, 236);
    padding-top: 12px;
    padding-bottom: 12px;
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 8px;
    color: white;
    text-align: center;
}
</style>